<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Personal Data - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .data-card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.2s;
        }
        .data-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        .stat-item {
            text-align: center;
            padding: 20px;
            border-radius: 8px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            margin-bottom: 20px;
        }
        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        .period-selector {
            margin-bottom: 20px;
        }
        .chart-container {
            position: relative;
            height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body class="personal-data">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Page Header-->
        <div class="page-header" th:style="|background-image: url(@{/assets/images/page-header/page-banner1.jpg})|">
            <div class="page-title"><h1>Personal Data Dashboard</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs">
                        <a th:href="@{/}" title="Back to the home page"><i class="an an-home icon-home"></i></a>
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <a th:href="@{/user/my-account}">My Account</a>
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <span>Personal Data</span>
                    </div>
                </div>
            </div>
        </div>
        <!--End Page Header-->
        
        <div class="container">
            <div class="row">
                <!-- 侧边栏导航 -->
                <div class="col-xl-2 col-lg-2 col-md-12 md-margin-20px-bottom">
                    <ul class="nav flex-column dashboard-list" role="tablist">
                        <li><a class="nav-link" th:href="@{/user/my-account}">My Account</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-account}">My Orders</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-favorites}">My Favorites</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-addresses}">Addresses</a></li>
                        <li><a class="nav-link" th:href="@{/notifications}">Notifications</a></li>
                        <li><a class="nav-link active" th:href="@{/personal-data}">Personal Data</a></li>
                        <li><a class="nav-link" href="#" onclick="logout()">Logout</a></li>
                    </ul>
                </div>

                <!-- 主要内容 -->
                <div class="col-xl-10 col-lg-10 col-md-12">
                    <div class="dashboard-content padding-30px-all md-padding-15px-all">
                        <div class="section-header style1 mb-4">
                            <h2>Personal Data Analytics</h2>
                            <p>Insights into your shopping behavior and preferences</p>
                        </div>

                        <!-- 时间周期选择 -->
                        <div class="period-selector">
                            <div class="btn-group" role="group" aria-label="Time period">
                                <input type="radio" class="btn-check" name="period" id="period7" value="7">
                                <label class="btn btn-outline-primary" for="period7">Last 7 Days</label>

                                <input type="radio" class="btn-check" name="period" id="period30" value="30" checked>
                                <label class="btn btn-outline-primary" for="period30">Last 30 Days</label>

                                <input type="radio" class="btn-check" name="period" id="period90" value="90">
                                <label class="btn btn-outline-primary" for="period90">Last 90 Days</label>

                                <input type="radio" class="btn-check" name="period" id="period365" value="365">
                                <label class="btn btn-outline-primary" for="period365">Last Year</label>
                            </div>
                        </div>

                        <!-- 关键统计卡片 -->
                        <div class="row mb-4">
                            <div class="col-lg-3 col-md-6">
                                <div class="stat-item">
                                    <div class="stat-value" th:text="${currentUser?.totalSpent ?: '0'}">¥0</div>
                                    <div class="stat-label">Total Spent</div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="stat-item">
                                    <div class="stat-value" th:text="${currentUser?.orderCount ?: '0'}">0</div>
                                    <div class="stat-label">Total Orders</div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="stat-item">
                                    <div class="stat-value" th:text="${currentUser?.currentYearSpent ?: '0'}">¥0</div>
                                    <div class="stat-label">This Year</div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="stat-item">
                                    <div class="stat-value" th:text="${currentUser?.memberLevel == 0 ? 'Gold' : (currentUser?.memberLevel == 1 ? 'Silver' : 'Bronze')}">Bronze</div>
                                    <div class="stat-label">Member Level</div>
                                </div>
                            </div>
                        </div>

                        <!-- 消费趋势图表 -->
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="data-card">
                                    <h5 class="mb-4">Spending Trend</h5>
                                    <div class="chart-container">
                                        <canvas id="spendingChart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="data-card">
                                    <h5 class="mb-4">Purchase Categories</h5>
                                    <div class="chart-container">
                                        <canvas id="categoryChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 购买偏好和支付方式 -->
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="data-card">
                                    <h5 class="mb-4">Payment Methods</h5>
                                    <div class="chart-container">
                                        <canvas id="paymentChart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="data-card">
                                    <h5 class="mb-4">Shopping Insights</h5>
                                    <div class="insights-list">
                                        <div class="insight-item d-flex justify-content-between py-2">
                                            <span>Most Active Day:</span>
                                            <strong>Saturday</strong>
                                        </div>
                                        <div class="insight-item d-flex justify-content-between py-2">
                                            <span>Favorite Category:</span>
                                            <strong>Electronics</strong>
                                        </div>
                                        <div class="insight-item d-flex justify-content-between py-2">
                                            <span>Average Order Value:</span>
                                            <strong>¥299</strong>
                                        </div>
                                        <div class="insight-item d-flex justify-content-between py-2">
                                            <span>Preferred Payment:</span>
                                            <strong>Alipay</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<div th:replace="~{include_header::footer}"></div>

<script th:src="@{/assets/js/vendor/jquery-3.6.0.min.js}"></script>
<script th:src="@{/assets/js/vendor/modernizr-3.6.0.min.js}"></script>
<script th:src="@{/assets/js/vendor/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/plugins.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script>
$(document).ready(function() {
    // 初始化图表
    initSpendingChart();
    initCategoryChart();
    initPaymentChart();
    
    // 监听时间周期变化
    $('input[name="period"]').change(function() {
        const period = $(this).val();
        loadDataForPeriod(period);
    });
});

// 消费趋势图表
function initSpendingChart() {
    const ctx = document.getElementById('spendingChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
            datasets: [{
                label: 'Spending (¥)',
                data: [1200, 800, 1500, 2000],
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.1)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

// 购买分类图表
function initCategoryChart() {
    const ctx = document.getElementById('categoryChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Electronics', 'Fashion', 'Home', 'Books', 'Sports'],
            datasets: [{
                data: [45, 25, 15, 10, 5],
                backgroundColor: [
                    '#FF6384',
                    '#36A2EB',
                    '#FFCE56',
                    '#4BC0C0',
                    '#9966FF'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
}

// 支付方式图表
function initPaymentChart() {
    const ctx = document.getElementById('paymentChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Alipay', 'WeChat Pay', 'Credit Card', 'Bank Transfer'],
            datasets: [{
                label: 'Usage Count',
                data: [25, 20, 8, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 205, 86, 0.8)',
                    'rgba(75, 192, 192, 0.8)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

// 根据时间周期加载数据
function loadDataForPeriod(period) {
    $.get('/personal-data/spending-trend', { period: period })
        .done(function(response) {
            if (response.success) {
                // 更新图表数据
                updateCharts(response.data);
            }
        })
        .fail(function() {
            console.error('Failed to load data for period:', period);
        });
}

// 更新图表数据
function updateCharts(data) {
    // 这里根据返回的数据更新图表
    console.log('Updating charts with data:', data);
}

// 用户注销
function logout() {
    if (confirm('Are you sure you want to logout?')) {
        $.post('/user/logout').done(function() {
            window.location.href = '/';
        });
    }
}
</script>

</body>
</html> 